<template>
  <view class="viewport">
    <scroll-view
      class="scroll-view"
      :refresher-triggered="refreshing"
      scroll-y="true"
      lower-threshold="20"
      @scrolltolower="onScrollToLower"
      @refresherrefresh="onRefresh"
    >
      <view class="warp">
        <view class="port">
          <view class="title">
            <fui-section
              title="基础信息"
              fontWeight="500"
              descrSize="25"
              color="#666"
              lineWidth="4px"
              isLine
            ></fui-section>
          </view>
          <view class="li">
            <view class="left">报修单号</view>
            <view class="right">BX-20224648</view>
          </view>
          <view class="li">
            <view class="left">报修主题</view>
            <view class="right">设备--4564787</view>
          </view>
          <view class="li">
            <view class="left">报修人</view>
            <view class="right">设备维修</view>
          </view>
          <view class="li">
            <view class="left">所属部门</view>
            <view class="right">adin</view>
          </view>
          <view class="li">
            <view class="left">联系方式</view>
            <view class="right">生产部一</view>
          </view>
          <view class="li">
            <view class="left">报修时间</view>
            <view class="right">2025-06-20 10:00:00</view>
          </view>
          <view class="li">
            <view class="left">备注</view>
            <view class="right">13526263535</view>
          </view>
        </view>

        <view class="port">
          <view class="title">
            <fui-section
              title="设备信息"
              fontWeight="500"
              descrSize="25"
              color="#666"
              lineWidth="4px"
              isLine
            ></fui-section>
          </view>
          <view class="li">
            <view class="left">设备名称</view>
            <view class="right">BX-20224648</view>
          </view>
          <view class="li">
            <view class="left">设备编号</view>
            <view class="right">BX-20224648</view>
          </view>
          <view class="li">
            <view class="left">设备型号</view>
            <view class="right">BX-20224648</view>
          </view>
          <view class="li">
            <view class="left">设备状态</view>
            <view class="right">BX-20224648</view>
          </view>
          <view class="li">
            <view class="left">存放位置</view>
            <view class="right">BX-20224648</view>
          </view>
          <view class="li">
            <view class="left">使用部门</view>
            <view class="right">BX-20224648</view>
          </view>
        </view>

        <view class="port">
          <view class="title">
            <fui-section
              title="故障图片"
              fontWeight="500"
              descrSize="25"
              color="#666"
              lineWidth="4px"
              isLine
            ></fui-section>
          </view>
          <div class="grid-container">
            <div class="grid-item" v-for="v of 7" :key="v">
              <image
                class="img"
                src="../../../static/images/my/background-Img.png"
                mode=""
              ></image>
            </div>
          </div>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from "vue";
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: skyblue;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  height: 100%;
}
.warp {
  padding-bottom: 30rpx;
  .document {
    .debris {
      display: flex;
      align-items: center;
      height: 100rpx;
      .img {
        width: 60rpx;
        height: 60rpx;
        margin: 0 30rpx;
      }
    }
  }
  .title {
    border-bottom: 1px solid #ccc;
    height: 70rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
  }
  .grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 30rpx;
  }

  .grid-item {
    // text-align: center;
    // padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .img {
      width: 100%;
      border-radius: 50%;
      height: auto;
      aspect-ratio: 1/1; /* 指定宽高比为 1:1 */
    }
  }
  .port {
    background-color: #fff;
    margin-bottom: 20rpx;
    .li {
      display: flex;
      align-items: center;
      height: 100rpx;
      padding-left: 40rpx;
      .right {
        margin-left: 30rpx;
        color: #cbb8b8;
      }
    }
    .item {
      // height: 100rpx;
      padding-left: 40rpx;
      padding-bottom: 30rpx;
      .left {
        height: 70rpx;
      }
      .described {
        padding-right: 50rpx;
      }
    }
  }
}
</style>
